<template>
  <div class="app-container calendar-list-container">
    <!-- filter 条件查询 -->
    <div class="filter-container">
      <el-form :inline="true">
          <el-form-item :label="$t('financial.Contract_number')">
            <el-input @keyup.enter.native="handleFilter" clearable v-model="listQuery.contractNo" style="width: 200px;" class="filter-item" :placeholder="$t('financial.Contract_number')" >
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('financial.Business_developer_name')">
            <el-input @keyup.enter.native="handleFilter" clearable v-model="listQuery.distributors" style="width: 200px;" class="filter-item" :placeholder="$t('financial.Business_developer_name')" >
            </el-input>
          </el-form-item>
          <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('financial.Search')}}</el-button>
          <el-button class="filter-item" type="primary" v-waves icon="el-icon-plus" @click="addWork">{{$t('financial.Add')}}</el-button>
      </el-form>          
    </div>
   <!-- table 表格 -->
    <el-table  :data="list" v-loading="loading.list" element-loading-text="waiting..." border fit highlight-current-row
      style="width: 100%">
      <el-table-column  :label="$t('financial.Serial_number')" prop="index" />
      <el-table-column  :label="$t('financial.Contract_number')" prop="contractNo"/>
      <el-table-column  :label="$t('financial.City')" prop="city" />
      <el-table-column  :label="$t('financial.Business_developer_name')" prop="distributors"/>
      <el-table-column  :label="$t('financial.Business_developerBD_name')" prop="distributorsBD"/>
      <el-table-column  :label="$t('financial.Shop_name')" prop="storeName"/>
      <el-table-column  :label="$t('financial.Shop_level')" prop="storeLv"/>
      <el-table-column  :label="$t('financial.Level_1')" prop="firstCategory"/>
      <el-table-column  :label="$t('financial.Level_2')" prop="twoCategory"/>
      <el-table-column  :label="$t('financial.Examing_Approving_time')" prop="auditDay" >
        <template slot-scope="scope">
          <span v-if="scope.row.auditDay">{{scope.row.auditDay | parseTime}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column  :label="$t('financial.Delivery_time')" prop="shipmentsDay" >
        <template slot-scope="scope">
          <span v-if="scope.row.shipmentsDay">{{scope.row.shipmentsDay | parseTime}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column  :label="$t('financial.Receipt_time ')" prop="signTime" >
        <template slot-scope="scope">
          <span v-if="scope.row.signTime">{{scope.row.signTime | parseTime}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column  :label="$t('financial.Monthly_new_added_shop ')" prop="month"/>
      <el-table-column  :label="$t('financial.Merchant_online_examine_standard ')"  prop="days"/>
      <el-table-column  :label="$t('financial.Shop_revenue')">
        <template slot-scope="scope">
          {{scope.row.income + '元'}}
        </template>
      </el-table-column>
      <el-table-column  :label="$t('financial.Revenue_distribution')" prop="proportion"/>
       <el-table-column  :label="$t('financial.Settlement_amount')">
        <template slot-scope="scope">
          {{scope.row.amount + '元'}}
        </template>
      </el-table-column>
      <el-table-column  :label="$t('financial.Operate')">
        <template slot-scope="scope">
          <el-button type="text" @click="dialog.update=true, editor(scope.row)">{{$t('financial.Edit')}}</el-button>
          <el-button type="text" @click="deleteIncomeById(scope.row.id)">{{$t('financial.Delete')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
  <!--编辑弹窗-->
    <el-dialog :title="$t('financial.Edit')" :visible.sync="dialog.update">
      <el-form :model="bindQuery1" :rules='bindRules' ref="bindForm" label-position="right" label-width="120px"> 
        <el-form-item :label="$t('financial.Contract_number')" prop="contractNo">
          <el-input  clearable v-model="bindQuery1.contractNo" ></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.City')" prop="city">
          <el-input  clearable v-model="bindQuery1.city" ></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Business_developer_name')" prop="distributors">
          <el-input  clearable v-model="bindQuery1.distributors" ></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Business_developerBD_name')" prop="distributorsBD">
          <el-input  clearable v-model="bindQuery1.distributorsBD" ></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Shop_name')" prop="storeName">
          <el-input  clearable v-model="bindQuery1.storeName" ></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Shop_level')" prop="storeLv">
          <el-input  clearable v-model="bindQuery1.storeLv" ></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Level_1')" prop="firstCategory">
          <el-input  clearable v-model="bindQuery1.firstCategory" ></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Examing_Approving_time')" prop="auditDay">
          <el-date-picker
            v-model="bindQuery1.auditDay"
            type="datetime"
            :placeholder="$t('financial.Select_time')"
            value-format="timestamp">
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('financial.Delivery_time')" prop="shipmentsDay">
          <el-date-picker
            v-model="bindQuery1.shipmentsDay"
            type="datetime"
            :placeholder="$t('financial.Select_time')"
            value-format="timestamp">
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('financial.Receipt_time')" prop="signTime">
          <el-date-picker
            v-model="bindQuery1.signTime"
            type="datetime"
            :placeholder="$t('financial.Select_time')"
            value-format="timestamp">
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('financial.Monthly_new_added_shop')"  prop="month">
          <el-input  clearable v-model="bindQuery1.month" ></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Merchant_online')" prop="days">
          <el-input  clearable v-model="bindQuery1.days" ></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Shop_revenue')" prop="income">
          <el-input  clearable v-model="bindQuery1.income" ></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Store_division')" prop="proportion">
          <el-input  clearable v-model="bindQuery1.proportion" ></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Settlement_amount')" prop="amount">
          <el-input  clearable v-model="bindQuery1.amount" ></el-input>
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="loading.add" @click="updateIncomeById">{{$t('financial.Confirm')}}</el-button>
      </div>
    </el-dialog>    
    <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination 
      background 
      @size-change="handleSizeChange" 
      @current-change="handleCurrentChange" 
      :current-page="listQuery.pageNo" 
      :page-sizes="[10, 20, 30, 40]" 
      :page-size="listQuery.pageSize" 
      layout="total, sizes, prev, pager, next, jumper" 
      :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { getIncomeListByPage, deleteIncomeById, updateIncomeById } from '@/api/financial'
export default {
  name: 'financial_back2',
  components: {
    CountTo,
  },
  data() {
    return {
      total: 0,
      parameter: '',
      date: '',
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        contractNo: '',
        distributors: ''
      },
      list: null,
      loading: {
        list: false,
        download: false
      },
      dialog:{
        update:false
      },
      bindQuery1: {
        contractNo: '',
        city: '',
        distributors: '',
        distributorsBD: '', 
        storeName: '',
        storeLv: '',
        firstCategory: '',
        twoCategory: '',
        auditDay: '',
        shipmentsDay: '',
        signTime: '',
        month: '',
        days: '',
        income: '',
        proportion: '',
        amount: '',  
        id: ''
      },
      bindRules:{
        storeLv: [
          { required: true, message: '请输入门店级别', trigger: 'blur' }
        ],
        month: [
          { required: true, message: '请输入门店新增月份', trigger: 'blur' }
        ]
      }
    }
  },
 
  created() {
    this.getIncomeListByPage()
  },
  methods: {
   //收入列表 
    async getIncomeListByPage() {
      this.loading.list = true
      try {
        const { data } = await getIncomeListByPage(this.listQuery)
        this.list = data.records.map((item, index) => ({
          index: index + 1,
          ...item
        }))
        this.total = data.total
      } catch (error) {        
      }
      this.loading.list = false     
    },
  //收入新增
    addWork() {
       this.$router.push('/financial/addoperating')
    },
  //删除
    async deleteIncomeById(id) {
      try{
        const { data } = await deleteIncomeById({ id })
        this.$message({
          type: 'success',
          message: `删除成功!`
        });
        this.getIncomeListByPage()
      }catch(error) {
      }
    },
  //编辑
  async updateIncomeById() {
    this.$refs['bindForm'].validate(async (valid) => {
      if(valid){
        try{
        const { data } = await updateIncomeById(this.bindQuery1)
        }catch(error){

        }
        this.$message({
          type: 'success',
          message: `修改成功!`
        });
        this.dialog.update = false
        this.getIncomeListByPage()
      }
    })    
  },
    //编辑渲染数据
    editor(item) {
      this.dialog.update = true
      this.bindQuery1.id = item.id
      this.bindQuery1.contractNo = item.contractNo
      this.bindQuery1.city = item.city
      this.bindQuery1.distributors = item.distributors
      this.bindQuery1.distributorsBD = item.distributorsBD
      this.bindQuery1.storeName = item.storeName
      this.bindQuery1.storeLv = item.storeLv
      this.bindQuery1.firstCategory = item.firstCategory
      this.bindQuery1.twoCategory = item.twoCategory
      this.bindQuery1.auditDay = item.auditDay
      this.bindQuery1.shipmentsDay = item.shipmentsDay
      this.bindQuery1.signTime = item.signTime
      this.bindQuery1.month = item.month
      this.bindQuery1.days = item.days
      this.bindQuery1.income = item.income
      this.bindQuery1.proportion = item.proportion
      this.bindQuery1.amount = item.amount
    },
    handleFilter() {
      this.listQuery.pageNo = 1
     this.getIncomeListByPage()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getIncomeListByPage()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      this.getIncomeListByPage()
    }
  }
}
</script>
